在一般使用 PrimeVue 的元件，需要先進行 import 才可使用，包含全域的載入或各頁面分別載入。

以下為全域載入為例：

// main.js
import Button from 'primevue/button';

app.component('Button', Button);

// HomeView.vue
<template>
  <main>
    <Button label="Submit" /> <!-- 使用 Button 元件 -->
  </main>
</template>

PrimeVue 推出 Auto Import 方式在不需將元件各別載入的情況下，便可自動載入。

1. 須先安裝自動載入的套件

npm i unplugin-vue-components -D
npm i @primevue/auto-import-resolver -D

2. 安裝完成後，需在 vite.config.js 內設定 auto import。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [PrimeVueResolver()]
    })
  ]
})

3. 回到 main.js 就可以將原本寫好的載入移除，在畫面上檢視可看到成功載入的元件。

import { createApp } from "vue"
import PrimeVue from "primevue/config"
import Aura from '@primevue/themes/aura'
import App from './App.vue'
const app = createApp(App)

// 不需撰寫元件的 import 
app.use(PrimeVue, {
  ripple: true,
  locale: zhTW['zh-TW'],
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',
      cssLayer: {
        name: 'primevue',
        order: 'tailwind-base, primevue, tailwind-utilities'
      }
    }
  }
})

每當有偵測到新使用到的元件時，可在終端機檢視到專案自動載入新元件的訊息：

參考連結：https://primevue.org/autoimport/